import React, {Suspense, lazy} from 'react';
import {
    HashRouter as Router,
    Switch,
    Redirect,
    Route,
} from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import Loading from './components/Loading';
import styled from 'styled-components';
import 'antd/dist/antd.css'

const HomePage = lazy(() => import('./views/HomePage'));
const HistoryPage = lazy(() => import('./views/HistoryPage'));
const AboutPage = lazy(() => import('./views/AboutPage'));
const NotFoundPage = lazy(() => import('./views/NotFoundPage'));
const Login = lazy(() => import('./views/Login'));
const Register = lazy(() => import('./views/Register'));

const Layout = styled.div`
  min-height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
`;

const Main = styled.main`
  width: 70%;
  flex-grow: 1;
`;

function App() {
    return (
        <Router>
            <Layout>
                <Header/>
                <Main>
                    <Suspense fallback={<Loading/>}>
                        <Switch>
                            <Route path="/home" exact component={HomePage}/>
                            <Route path="/history" exact component={HistoryPage}/>
                            <Route path="/about" exact component={AboutPage}/>
                            <Route path="/login" exact component={Login}/>
                            <Route path="/register" exact component={Register}/>
                            <Redirect exact from="/" to="/home"/>
                            <Route path="*" component={NotFoundPage}/>
                        </Switch>
                    </Suspense>
                </Main>
                <Footer/>
            </Layout>
        </Router>
    );
}

export default App;